<script setup lang="ts">
import { getQclLeftData } from '@/api/Quancheng';
import networkPipe from '@/components/ECharts/networkRisk/index.vue';
import COMPONENT_TITLES from '@/constants/components/componentsTitle';

// 声明emits以避免Vue 3警告
defineEmits(['postMessage']);

const pipelineInfo = ref([]);
onMounted(async () => {
  try {
    const { data } = await getQclLeftData({ type: 'pipeLineQcl' });
    pipelineInfo.value = data.pipeLineQcl;
  } catch (error) {
    console.warn(error, '获取管线风险信息失败');
  }
});
</script>

<template>
  <el-row :gutter="20" class="network-box">
    <el-col :span="24">
      <networkPipe :echartsData="pipelineInfo" :title="COMPONENT_TITLES.NETWORK_TITLE" />
      <dialogPipTable />
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.network-box {
  width: 100%;
  height: 100%;
  position: relative;

  .container-box {
    z-index: 99;
    position: absolute;
    left: 0%;
    top: -9%;
    width: 153.88px;
    height: 150px;

    border: 2px solid rgba(95, 175, 255, 0.502);
    background-color: #09306f;
    box-shadow: inset 0px 0px 20px 0px #045bbd;
    box-sizing: border-box;

    .container-main-box {
      width: 100%;
      height: 100%;
      font-size: 14px;
      color: #ccd7df;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .container-item {
      width: 100%;
      cursor: pointer;
      text-align: center;
      height: 35px;
      line-height: 35px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .container-item-active {
      cursor: pointer;
      background-image: url(@/assets/largescreen/container-icon.png);
      width: 98%;
      height: 35px;
      line-height: 35px;
      background-size: 100% 100%;
      font-weight: 700;
      color: #fff;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
}
</style>
